import React from "react";
import { TabBar } from "antd-mobile";
import { useLocation, useNavigate } from "react-router-dom";
import { second_router } from "../../routes/router";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  return (
    <div>
      <div
        className="tabr"
        style={{
          background: "#fff",
          position: "fixed",
          bottom: 0,
          left: 0,
          zIndex: 9999,
          width: "100%",
          height: "50px",
          backgroundColor: "#fff",
        }}
      >
        <TabBar
          activeKey={pathname}
          onChange={(val: string) => navigate(val as string)}
          style={{
            background: "#fff",
          }}
        >
          {second_router.map((item) => {
            return (
              <TabBar.Item
                key={item.path}
                icon={item.meta?.icon}
                title={item.meta?.label}
              >
                {item.meta?.label}
              </TabBar.Item>
            );
          })}
        </TabBar>
      </div>
    </div>
  );
};

export default Index;
